<template>
  <el-row>
    <el-row>
      <el-col :span="3"
        ><el-button type="success" @click="adds()">新增</el-button></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="6"
        ><el-input
          size="medium"
          v-model="input"
          placeholder="请输入姓名进行搜索"
        ></el-input
      ></el-col>
      <el-col :span="3"
        ><el-button type="primary" @click="search()">搜索</el-button></el-col
      >
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <!-- 这个为序号 -->

      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column>
        <!-- 让弹框显示 -->
        <template slot-scope="scope">
          <el-button type="primary" @click="sets(scope.row)">修改</el-button>
          <el-button type="danger" @click="removes(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增" :visible.sync="el_show">
      <el-form>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入姓名"
            v-model="name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入地址"
            v-model="address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pushs()">新 增</el-button>
        <el-button @click="err()">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="el_xiu">
      <el-form>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="newtable.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入姓名"
            v-model="newtable.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入地址"
            v-model="newtable.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="trueset()">修 改</el-button>
        <el-button @click="xg_err()">取 消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      searchs: [],
      input: null,
      searchtableData: [
        //搜索框初始数据
        {
          date: "2019-12-02",
          name: "长安",
          address: "长安归故里",
          id: 0,
        },
        {
          date: "2019-12-02",
          name: "故里",
          address: "故里归长安",
          id: 1,
        },
        {
          date: "2019-12-02",
          name: "百里",
          address: "尔来四万八千岁",
          id: 2,
        },
        {
          date: "2019-12-02",
          name: "秦汉",
          address: "不与秦塞通人烟",
          id: 3,
        },
        {
          date: "2019-12-02",
          name: "李白",
          address: "西当太白有鸟道",
          id: 4,
        },
      ],
      tableData: [
        {
          date: "2019-12-02",
          name: "长安",
          address: "长安归故里",
          id: 0,
        },
        {
          date: "2019-12-02",
          name: "故里",
          address: "故里归长安",
          id: 1,
        },
        {
          date: "2019-12-02",
          name: "百里",
          address: "尔来四万八千岁",
          id: 2,
        },
        {
          date: "2019-12-02",
          name: "秦汉",
          address: "不与秦塞通人烟",
          id: 3,
        },
        {
          date: "2019-12-02",
          name: "李白",
          address: "西当太白有鸟道",
          id: 4,
        },
      ],
      el_show: false,

      el_xiu: false,
      date: "",
      name: "",
      address: "",
      newtable: {
        date: "",
        name: "",
        address: "",
      }, //修改内容暂存区
      formLabelWidth: "120px",
      newid: 0, //存储点击的id
    };
  },
  methods: {
    //搜索
    search: function() {
      console.log(this.input);
      this.tableData.map((item) => {
        if (this.input == null || this.input == "") {
          // this.$message({  在循环中会直接弹出多个同样提示框（不可用）
          //     message: '搜索内容不存在或搜索字段错误',
          //     type: 'warning'
          // });
          this.tableData = this.searchtableData;
          return;
        } else if (item.name.includes(this.input)) {
          // eslint-disable-line no-unused-vars
          this.searchs = []; //每次搜索前清空，否则会一直追加
          this.searchs.push(item);
          console.log(this.searchs);
          this.tableData = this.searchs;
          console.log(this.tableData);
          return;
        }
      });
    },
    //新增让弹框显示
    adds: function() {
      this.el_show = true;
    },
    //取消让弹框隐藏
    err: function() {
      this.el_show = false;
    },
    //删除某条信息
    removes: function(v) {
      console.log(v.id);
      this.newid = this.tableData.findIndex((item) => {
        return item.id == v.id;
      });
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(this.newid, 1); //删除代码
          this.searchtableData = this.tableData; //绑定搜索框初始数据
          console.log(this.tableData);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //新增
    pushs: function() {
      if (!this.date || !this.name || !this.address) {
        this.$message.error("内容不能为空");
        return;
      }
      //使用map方法获取到id的最大值
      let ids =
        Math.max(
          ...this.tableData.map(function(item) {
            return item.id;
          })
        ) + 1;
      this.tableData.push({
        date: this.date,
        name: this.name,
        address: this.address,
        id: ids,
      });
      this.searchtableData = this.tableData; //绑定搜索框初始数据
      // this.$message({
      //   message: "创建成功",
      //   type: "success",
      // });
      (this.date = ""),
        (this.name = ""),
        (this.address = ""),
        (this.el_show = false);
    },

    //修改
    //弹出框 显示
    sets: function(val) {
      this.el_xiu = true;

      console.log(val);
      this.newtable = {
        date: val.date,
        name: val.name,
        address: val.address,
        id: val.id,
      };
    },
    xg_err: function() {
      this.el_xiu = false;
    },
    //保存修改
    trueset: function() {
      console.log(this.newtable.date + "===");
      for (var i = 0; i < this.tableData.length; i++) {
        console.log(this.tableData[i].id);
        if (this.tableData[i].id == this.newtable.id) {
          this.tableData[i].date = this.newtable.date;
          this.tableData[i].name = this.newtable.name;
          this.tableData[i].address = this.newtable.address;
          this.tableData[i].id = this.newtable.id;
          this.el_xiu = false;
        }
      }
      this.searchtableData = this.tableData; //绑定搜索框初始数据
    },
  },
};
</script>
<style scoped></style>
